const { src, dest, parallel, watch } = require('gulp'); //导入gulp

// 1.导入其他的插件
const less = require('gulp-less');  //编译less插件 第三方库，这个需要去cmd命令去下载 cnpm i gulp-less -D
const cleanCss = require("gulp-clean-css");//压缩css插件 cnpm i gulp-clean-css -D
const rename = require("gulp-rename");//重命名插件   cnpm i gulp-rename -D
var uglify = require("gulp-uglify"); // 压缩js插件 cnpm i gulp-uglify -D
var browserSync = require("browser-sync").create(); // 启动服务器插件  cnpm i browser-sync -D
var reload = browserSync.reload; // 热加载 不需要下载

// 2.写任务
//    编译less
function css() {
    return src("./less/*.less") // 要处理的文件源
        .pipe(less()) // 编译
        .pipe(cleanCss()) // 压缩
        .pipe(
            rename({
                // 重命名
                suffix: ".min"
            })
        )
        .pipe(dest("./dist/css")) // 输出
        .pipe(reload({ // 热加载
            stream: true
        }))

}
// 压缩js

function js() {
    return src("./js/*.js") // 要处理的文件源
        .pipe(uglify()) // 压缩处理
        .pipe(
            rename({
                // 重命名
                suffix: ".min"
            })
        )
        .pipe(dest("./dist/js")) // 输出
        .pipe(reload({ // 热加载
            stream: true
        }))

}
//启动服务器
function serve() {
    browserSync.init({
        server: {
            baseDir: "./"
        },
        port: 3033
    });
}
// 观察者【上帝之眼】
function auto() {
    watch("./less/*.less", css); // css
    watch("./js/*.js", js); // js
    watch("**/*.html").on("change", reload) // html
}

// 导出 暴露
exports.css = css;
exports.js = js;
exports.serve = serve;
// 一起执行 暴露默认 default
exports.default = parallel(js, css, serve, auto);

